<template>
    <div class="public-container">
        <div class="main">
            <div class="query-content">
                <el-radio-group
                    v-model="orgType"
                    @change="radioChange"
                    class="custom-radio-group"
                >
                    <el-radio :label="1">公募</el-radio>
                    <el-radio :label="2">社保</el-radio>
                    <el-radio :label="3">保险资金</el-radio>
                </el-radio-group>
                <span class="label">报告期</span>
                <el-select
                    v-model="endDate"
                    size="small"
                    popper-class="custom-popper-class"
                    placeholder="请选择"
                    @change="selectChange"
                >
                    <el-option
                        v-for="(item, i) in timeList"
                        :key="i"
                        :label="item.YEAR + '年第' + item.QUARTER + '季度'"
                        :value="item.endDate"
                    >
                        <span>{{
                            item.YEAR + "年第" + item.QUARTER + "季度"
                        }}</span>
                    </el-option>
                </el-select>
                <el-select
                    v-model="blockName"
                    size="small"
                    popper-class="custom-popper-class"
                    style="margin-left: 10px"
                    placeholder="请选择板块"
                    @change="(stockInfo='',selectStockInfo=null, selectChange())"
                >
                    <el-option
                        v-for="(item, i) in blockNameList"
                        :key="i"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
                <el-autocomplete
                    v-model="stockInfo"
                    size="small"
                    style="width: 310px; margin: 0 14px 0 10px"
                    popper-class="custom-popper-class"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入板块名称或股票名称代码"
                    @select="handleSelect"
                >
                    <span
                        slot="append"
                        @click.stop="(marketCode = ''), toQuery()"
                        >搜 索</span
                    >
                </el-autocomplete>
                <span @click="toQuery('clear')" class="reset">重置</span>
            </div>
            <div class="table-content">
                <div class="content">
                    <table
                        width="100%"
                        border="0"
                        bgcolor="#33343B"
                        cellpadding="0"
                        class="table-box table-box1"
                        align="center"
                    >
                        <tr class="title">
                            <td colspan="4"></td>
                            <td :colspan="orgType == 1 ? 7 : 6">
                                十大流通股东数据
                            </td>
                            <td colspan="7">
                                {{
                                    orgType == 1? "总公募数据": orgType == 2? "总社保数据": orgType == 3? "总保险资金数据": ""
                                }}
                            </td>
                        </tr>
                        <tr class="head-tr">
                            <td class="head-td">序号</td>
                            <td class="head-td">代码</td>
                            <td class="head-td">名称</td>
                            <td class="head-td">所属板块</td>

                            <td
                                class="head-td sort"
                                @click="tagSort(sortkeys['publicFundNum'],'publicFundNum')"
                            >       
                                {{
                                    orgType == 1
                                        ? "公募个数"
                                        : orgType == 2
                                        ? "社保个数"
                                        : orgType == 3
                                        ? "保险资金个数"
                                        : ""
                                }}<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'publicFundNum'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['cirHldTotNum'],
                                        'cirHldTotNum'
                                    )
                                "
                            >
                                持有数量<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'cirHldTotNum'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['cirHldTotPct'],
                                        'cirHldTotPct'
                                    )
                                "
                            >
                                持有比例<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'cirHldTotPct'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['cirHldTotNumDecrIncr'],
                                        'cirHldTotNumDecrIncr'
                                    )
                                "
                            >
                                新进/增持{{
                                    orgType == 1
                                        ? "公募"
                                        : orgType == 2
                                        ? "社保"
                                        : orgType == 3
                                        ? "保险"
                                        : ""
                                }}家数<i
                                    :class="['icon', sortDirection]"
                                    v-show="
                                        currentSortKey == 'cirHldTotNumDecrIncr'
                                    "
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['cirHldTotChgNum'],
                                        'cirHldTotChgNum'
                                    )
                                "
                            >
                                变动数量<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'cirHldTotChgNum'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['cirHldTotChgPct'],
                                        'cirHldTotChgPct'
                                    )
                                "
                            >
                                变动比例<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'cirHldTotChgPct'"
                                ></i>
                            </td>
                            <td class="head-td" v-if="orgType == 1">
                                <el-checkbox
                                    class="table-checkbox"
                                    v-model="commonOriginalFund"
                                    :true-label="1"
                                    :false-label="0"
                                    @change="radioChange"
                                ></el-checkbox>
                                同门基金
                            </td>

                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldTotNumEnd'],
                                        'hldTotNumEnd'
                                    )
                                "
                            >
                                持股数量<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'hldTotNumEnd'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldTcapEnd'],
                                        'hldTcapEnd'
                                    )
                                "
                            >
                                持仓市值<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'hldTcapEnd'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldFlPctEnd'],
                                        'hldFlPctEnd'
                                    )
                                "
                            >
                                占盘比<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'hldFlPctEnd'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldTotNumEndDecrIncr'],
                                        'hldTotNumEndDecrIncr'
                                    )
                                "
                            >
                                持股增减<i
                                    :class="['icon', sortDirection]"
                                    v-show="
                                        currentSortKey == 'hldTotNumEndDecrIncr'
                                    "
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldFlPctEndDecrIncr'],
                                        'hldFlPctEndDecrIncr'
                                    )
                                "
                            >
                                占盘比增减<i
                                    :class="['icon', sortDirection]"
                                    v-show="
                                        currentSortKey == 'hldFlPctEndDecrIncr'
                                    "
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(sortkeys['hldOrgNum'], 'hldOrgNum')
                                "
                            >
                                {{
                                    orgType == 1
                                        ? "公募个数"
                                        : orgType == 2
                                        ? "社保个数"
                                        : orgType == 3
                                        ? "保险资金个数"
                                        : ""
                                }}<i
                                    :class="['icon', sortDirection]"
                                    v-show="currentSortKey == 'hldOrgNum'"
                                ></i>
                            </td>
                            <td
                                class="head-td sort"
                                @click="
                                    tagSort(
                                        sortkeys['hldOrgNumDecrIncr'],
                                        'hldOrgNumDecrIncr'
                                    )
                                "
                            >
                                {{
                                    orgType == 1
                                        ? "公募增减数"
                                        : orgType == 2
                                        ? "社保增减数"
                                        : orgType == 3
                                        ? "保险资金增减数"
                                        : ""
                                }}<i
                                    :class="['icon', sortDirection]"
                                    v-show="
                                        currentSortKey == 'hldOrgNumDecrIncr'
                                    "
                                ></i>
                            </td>
                        </tr>

                        <tr
                            :class="['table-tr',currentRow.stockCode == item.stockCode? 'active': '',]"
                            v-for="(item, i) in tableData"
                            :key="i"
                            @dblclick="link(item)"
                            @click="getCirStockHolderList(item)"
                        >
                            <td :class="['data-td']">{{ i + 1 }}</td>
                            <td :class="['data-td', 'orange']">
                                <span>{{ version==301&&isDemoVersion?'******':item.stockCode }}</span>
                            </td>
                            <td :class="['data-td', 'orange']">
                                <span>{{ version==301&&isDemoVersion?'******':item.stockName }}</span>
                            </td>
                            <td :class="['data-td']">
                                <span>{{ item.blockName }}</span>
                            </td>
                            <!-- 十大流通股东 start -->
                            <td :class="['data-td', 'orange']">
                                {{ item.publicFundNum }}
                            </td>
                            <td :class="['data-td', 'turquoise', 'right']">
                                {{ item.cirHldTotNum | setData }}
                            </td>
                            <td :class="['data-td', 'percent', 'right']">
                                {{ item.cirHldTotPct | fixed2 }}%
                            </td>
                            <td :class="['data-td']">
                                {{ item.cirHldTotNumDecrIncr }}
                            </td>
                            <td
                                :class="[
                                    'data-td',
                                    item.cirHldTotChgNum == 0
                                        ? ''
                                        : item.cirHldTotChgNum > 0
                                        ? 'red'
                                        : 'green',
                                ]"
                            >
                                {{ item.cirHldTotChgNum < 0 ? "-" : ""
                                }}{{ item.cirHldTotChgNum | setData }}
                            </td>
                            <td
                                :class="[
                                    'data-td',
                                    'right',
                                    item.cirHldTotChgPct.toFixed(2) == 0
                                        ? ''
                                        : item.cirHldTotChgPct.toFixed(2) > 0
                                        ? 'red'
                                        : 'green',
                                ]"
                            >
                                {{ item.cirHldTotChgPct | fixed2 }}%
                            </td>
                            <td
                                v-if="orgType == 1"
                                :class="[
                                    'data-td',
                                    item.commonOriginalFund == '1'
                                        ? 'turquoise'
                                        : '',
                                ]"
                            >
                                {{ item.commonOriginalFund == 1 ? "有" : "无" }}
                            </td>
                            <!-- 十大流通股东 end -->

                            <!-- 总公募数据 start -->
                            <td :class="['data-td', 'turquoise', 'right']">
                                {{ item.hldTotNumEnd | setData }}
                            </td>
                            <td :class="['data-td', 'orange', 'right']">
                                {{ item.hldTcapEnd | setData }}
                            </td>
                            <td :class="['data-td', 'right',]">
                                {{ item.hldFlPctEnd | fixed2 }}%
                            </td>
                            <td
                                :class="[
                                    'data-td',
                                    ,
                                    'right',
                                    item.hldTotNumEndDecrIncr == 0
                                        ? ''
                                        : item.hldTotNumEndDecrIncr > 0
                                        ? 'red'
                                        : 'green',
                                ]"
                            >
                                {{ item.hldTotNumEndDecrIncr < 0 ? "-" : ""
                                }}{{ item.hldTotNumEndDecrIncr | setData }}
                            </td>
                            <td
                                :class="[
                                    'data-td',
                                    'right',
                                    item.hldFlPctEndDecrIncr.toFixed(2) == 0
                                        ? ''
                                        : item.hldFlPctEndDecrIncr.toFixed(2) >
                                          0
                                        ? 'red'
                                        : 'green',
                                ]"
                            >
                                {{ item.hldFlPctEndDecrIncr | fixed2 }}%
                            </td>
                            <td :class="['data-td', 'orange']">
                                {{ item.hldOrgNum }}
                            </td>
                            <td
                                :class="[
                                    'data-td',
                                    item.hldOrgNumDecrIncr == 0
                                        ? ''
                                        : item.hldOrgNumDecrIncr > 0
                                        ? 'red'
                                        : 'green',
                                ]"
                            >
                                {{ item.hldOrgNumDecrIncr }}
                            </td>
                        </tr>
                        <tr class="table-tr" v-if="tableData.length < 1">
                            <td :class="['data-td']" colspan="18">暂无数据</td>
                        </tr>
                    </table>
                </div>
                <div style="border: 1px solid #33343B;"> 
                    <table
                        width="430"
                        border="0"
                        bgcolor="#33343B"
                        cellpadding="0"
                        class="table-box table-box2"
                        align="center"
                        style="border-collapse: collapse"
                    >
                        <tr class="title" style="border-bottom: 1px solid #33343B">
                            <td class="title-td">十大流通股东</td>
                        </tr>
                        <tr class="table-tr">
                            <td width="450" valign="top" class="holder-td">
                                <div v-if="tenShareholder.length > 0">
                                    <div class="holder holder-head">
                                        <span class="head-1">序号</span>
                                        <span></span>
                                        <span>股东名称</span>
                                        <span>持股量</span>
                                    </div>
                                    <div
                                        v-for="(val, i) in tenShareholder"
                                        :key="i"
                                        class="holder holder-item"
                                    >
                                        <span>{{ i + 1 }}</span>
                                        <span>
                                            <span
                                                :class="[
                                                    'org-label',
                                                    ['007', '703'].includes(
                                                        val.orgType
                                                    )
                                                        ? 'org-1'
                                                        : [
                                                            '026',
                                                            '701',
                                                            '702',
                                                        ].includes(val.orgType)
                                                        ? 'org-2'
                                                        : ['003', '714'].includes(
                                                            val.orgType
                                                        )
                                                        ? 'org-3'
                                                        : '',
                                                ]"
                                            >
                                                {{
                                                    ["007", "703"].includes(
                                                        val.orgType
                                                    )
                                                        ? "公募"
                                                        : [
                                                            "026",
                                                            "701",
                                                            "702",
                                                        ].includes(val.orgType)
                                                        ? "社保"
                                                        : ["003", "714"].includes(
                                                            val.orgType
                                                        )
                                                        ? "保险"
                                                        : ""
                                                }}
                                            </span>
                                        </span>
                                        <span
                                            :class="['color-' + val.originalNum]"
                                            >{{ val.name }}</span
                                        >
                                        <span class="turquoise">{{
                                            val.holdNum | setData
                                        }}</span>
                                    </div>
                                </div>
                                <div v-else class="no-data">暂无数据</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div>
                <page
                    :pageSize="pageConfig.pageSize"
                    :currentPage="pageConfig.currentPage"
                    :total="pageConfig.total"
                    @onPage="pageChange"
                >
                </page>
            </div>
        </div>
    </div>
</template>

<script>
import page from "../components/page";
import {getUrlParams} from "../../../common/common";
const {version} = getUrlParams();
import {
    getPublicOfferList,
    getCirStockHolderList,
    getQuarterTimeList,
    getblockNameList,
    getblockStockList,
} from "../api/index";

export default {
    name: "Home",
    components: {
        page,
    },
    data() {
        return {
            version, // 添加演示版本判断
            isDemoVersion: false, // 添加演示版本判断
            blockName: "",
            stockInfo: "", //搜索股票
            selectStockInfo: null,
            timeout: null,
            blockNameList: [],
            pageConfig: {
                pageSize: 23,
                currentPage: 1,
                total: 10,
            },
            orgType: 1,
            endDate: "",
            commonOriginalFund: 0, // 是否有同门基金 0-没有 ;1-有

            timeList: [],
            tableData: [],
            tenShareholder: [],
            currentRow: {},
            sortkeys: {
                hldOrgNum: 0,
                hldOrgNumDecrIncr: 1,
                hldTotNumEnd: 2,
                hldTotNumEndDecrIncr: 3,
                hldFlNumEnd: 4,
                hldTotPctEnd: 5,
                hldFlPctEndDecrIncr: 6,
                hldTcapEnd: 7,
                hldMktcapEnd: 8,
                publicFundNum: 9,
                cirHldTotNum: 10,
                cirHldTotNumDecrIncr: 11,
                cirHldTotChgNum: 12,
                cirHldTotChgPct: 13,
                hldFlPctEnd: 14,
                cirHldTotPct: 15,
            },
            currentSortKey: "publicFundNum",
            sortDirection: "desc", //排序放心  desc 降序 asc 升序
            sortFild: 9, // 排序id
        };
    },
    created() {
        this.getQuarterTimeList();
        this.getblockNameList();
    },
    filters: {
        fixed2(val) {
            return Number(val).toFixed(2);
        },
    },
    methods: {
        // todo
        toQuery(type) {
            this.pageConfig.currentPage = 1;
            if (type == "clear") {
                this.stockInfo = "";
                this.blockName = "";
                this.selectStockInfo = null;
            }
            this.getPublicOfferList();
        },
        // 获取行业名称列表
        getblockNameList() {
            getblockNameList().then((res) => {
                this.blockNameList = res.data || [];
            });
        },
        // 输入框自动搜索
        querySearchAsync(string, cb) {
            if (!string) {
                cb([]);
                return;
            }
            clearTimeout(this.timeout);
            this.selectStockInfo = null;
            this.timeout = setTimeout(() => {
                getblockStockList(string).then((res) => {
                    let arr = [];
                    for (let val of res.data.block) {
                        val.type = 2;
                    }
                    arr.push(...res.data.block, ...res.data.stocks);
                    for (let item of arr) {
                        item.value = item.stockName;
                    }
                    console.log(arr);
                    cb(arr);
                });
            }, 100);
        },
        // 输入框自动搜索 选择
        handleSelect(data) {
            this.selectStockInfo = data;
        },
        //todo end

        // 获取季度时间列表
        getQuarterTimeList() {
            // 默认 传8  8个季度
            getQuarterTimeList(8).then((res) => {
                this.timeList = res.data || [];
                this.endDate = this.timeList[0].endDate;
                this.pageConfig.currentPage = 1;
                this.getPublicOfferList();
            });
        },
        // 页数发生变化
        pageChange(v) {
            console.log(v);
            this.pageConfig.currentPage = v;
            this.tenShareholder = [];
            this.getPublicOfferList();
        },

        // 时间变化
        selectChange() {
            this.pageConfig.currentPage = 1;
            this.tenShareholder = [];
            this.getPublicOfferList();
        },
        // 单选变化
        radioChange() {
            this.pageConfig.currentPage = 1;
            this.tenShareholder = [];
            this.getPublicOfferList();
        },
        // 获取公募作战列表
        getPublicOfferList() {
            // 演示版本 最新季度股票代码股票名称隐藏
            this.isDemoVersion = this.endDate== this.timeList[0].endDate;
            let param = {
                currentPage: this.pageConfig.currentPage,
                pageSize: this.pageConfig.pageSize,
                orgType: this.orgType,
                endDate: this.endDate,
                commonOriginalFund: this.commonOriginalFund,
                sortFild: this.sortFild,
                sortDirection: this.sortDirection,
                //todo
                blockName: this.blockName,
                stockInfo: this.selectStockInfo
                    ? this.selectStockInfo.type == 2
                        ? this.selectStockInfo.stockName
                        : this.selectStockInfo.stockCode.substr(0, 6)
                    : this.stockInfo,
                stockType: this.selectStockInfo
                    ? this.selectStockInfo.type == 2
                        ? 2
                        : 1
                    : 1,
            };
            if (param.orgType !== 1) {
                delete param.commonOriginalFund;
            }
            getPublicOfferList(param).then((res) => {
                console.log(res);
                this.tableData = (res.data && res.data.records) || [];
                // 默认查询第一条
                if (this.tableData.length > 0) {
                    this.getCirStockHolderList(this.tableData[0]);
                }else {
                    this.tenShareholder=[];
                }
                this.pageConfig.total = res.data.total || 0;
            });
        },
        // 通过股票代码报告期查询相关十大流通股
        getCirStockHolderList(row) {
            this.currentRow = row;
            let param = {
                stockCode: row.stockCode,
                endDate: this.endDate,
            };
            getCirStockHolderList(param).then((res) => {
                console.log(res);
                this.tenShareholder = res.data || [];
            });
        },
        tagSort(val, key) {
            this.sortFild = val;
            this.currentSortKey = key;
            this.sortDirection == "asc"
                ? (this.sortDirection = "desc")
                : (this.sortDirection = "asc");
            this.getPublicOfferList();
        },
        //跳转个股详情
        link(item) {
            if(this.version==301&&this.isDemoVersion) return; // 演示版本
            // SH 上证  SZ深证
            let type = item.marketCode == "SZ" ? "0" : "1";
            window.prompt(
                "",
                `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${
                    item.stockCode
                }","type":"首页"}]`
            );
        },
    },
};
</script>

<style lang="scss">
.query-content {
    .el-input--small .el-input__inner {
        height: 35px;
        line-height: 35px;
        background: #090910;
        border-color: #434448;
        color: #bcbfc4;
    }
    .el-date-editor.el-input {
        .el-input__inner {
            background: #27282e;
            border-color: #434448;
            color: #fff;
            border-top-left-radius: inherit;
            border-bottom-left-radius: inherit;
            border-left: none;
            width: 150px;
        }
        .el-input__prefix {
            .el-input__icon.el-icon-date {
                line-height: 35px;
            }
        }
    }
    .el-input {
        .el-input-group__append {
            background: linear-gradient(0deg, #343845, #4e596d);
            border: 1px solid #434448;
            color: #fff;
        }
    }
}

.el-select-dropdown.el-popper.custom-popper-class,
.el-autocomplete-suggestion.el-popper.custom-popper-class {
    border: 1px solid #25262a;
    background-color: #25262a;
    margin-top: 0;

    .el-select-dropdown__item {
        color: #f2faff;
        &.selected {
            background: #1d212c;
        }
    }
    .popper__arrow {
        display: none;
    }
    li {
        color: #fff;
    }
    li:hover,
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #2d3246;
    }
}
.public-container {
    .el-checkbox.table-checkbox {
        .el-checkbox__inner {
            border: 1px solid #5c5e69;
            background-color: #1f2025;
        }
    }
}
</style>
<style lang="scss">
html,
body,
.container {
    width: 100%;
    height: 100%;
    // background: #25262a;
    background: #090910;
}
.public-container {
    //background: #25262a;
    background: #090910;
    height: 100%;
    .main {
        height: 100%;
    }
    .query-content {
        padding: 5px 10px;
        display: flex;
        align-items: center;
        .label {
            color: #fff;
            font-size: 15px;
            padding: 0 15px 0 5px;
        }
        .reset {
            color: #8cb4f7;
            font-size: 15px;
            cursor: pointer;
        }
        .el-radio-group.custom-radio-group {
            .el-radio__inner {
                border: 1px solid #5c5e69;
                border-radius: 100%;
                width: 14px;
                height: 14px;
                background-color: #1f2025;
                cursor: pointer;
                box-sizing: border-box;
            }
            .el-radio {
                display: inline-flex;
                align-items: center;
                margin-right: 15px;
            }
            .el-radio__label {
                font-size: 16px;
                font-weight: 400;
                color: #e6e6e6;
                padding-left: 7px;
            }
            .el-radio__input.is-checked .el-radio__inner {
                border-color: #ea2827;
                background: #1f2025;
            }
            .el-radio__input.is-checked + .el-radio__label {
                color: #ea2827;
            }
            .el-radio__input.is-checked .el-radio__inner::after {
                width: 7px;
                height: 7px;
                border-radius: 100%;
                background-color: #ea2827;
            }
        }
        .el-select.el-select--small {
            .el-input.el-input--small {
                .el-input__inner {
                    background: linear-gradient(0deg, #343845, #4e596d);
                    border: 1px solid #434448;
                    height: 35px;
                    line-height: 35px;
                    color: #fff;
                    font-size: 15px;
                    width: 185px;
                }
            }
        }
    }
    .table-content {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #33343b;
        border-left: 1px solid #33343b;
        min-height: calc(100% - 110px);
        .content {
            flex-basis: calc(100% - 430px);
            flex-grow: 1;
            overflow-x: auto;
            &::-webkit-scrollbar {
                width: 30px;
                height: 6px;
                background: #090910;
            }
            // &::-webkit-scrollbar-corner {
            //     background: #434448;
            // }
            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                min-height: 28px;
                padding: 20px 0 0;
                background: #434448;
            }
        }
        .table-box2 {
            align-self: stretch;
            .title-td {
                height: 32px;
            }
            .no-data {
                height: 100%;
                color: #bcbfc4;
            }
        }
        .table-box1 {
            td {
                white-space: nowrap;
            }
        }
    }
    .table-box {
        border-collapse: separate;
        border-spacing: 1px;
        td {
            //background: #25262a;
            background: #090910;
            text-align: center;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 400;
            padding: 9px 5px;
        }
        .table-tr {
            &.active {
                td:not(.holder-td) {
                    background: #2d3245;
                    cursor: pointer;
                }
            }
            &:hover {
                td:not(.holder-td) {
                    background: #1d202c;
                    cursor: pointer;
                }
            }

            .data-td {
                font-weight: 400;
                color: #bcbfc4;
                &.right {
                    text-align: right;
                }
                &.red {
                    color: #ea2827;
                }
                &.green {
                    color: #31ed24;
                }
                &.orange {
                    color: #f4f636;
                }
                &.turquoise {
                    color: #02e2f4;
                }
                &.percent {
                    color: #e5e5e5;
                }
            }
        }
        .title {
            font-size: 18px;
            font-weight: 400;
            color: #ffbe60;
        }
        .head-tr {
            font-size: 15px;
            font-weight: 400;
            color: #bcbfc4;
            .head-td {
                background: #232429;
                white-space: nowrap;
                &.sort {
                    cursor: pointer;
                }
                .icon {
                    display: inline-block;
                    width: 7px;
                    height: 9px;
                    margin-left: 5px;
                    &.desc {
                        background: url($PIC_URL + "/tlbypcWeb/support/grid_arrow.png")
                            no-repeat center;
                    }
                    &.asc {
                        background: url($PIC_URL + "/tlbypcWeb/support/grid_2.png")
                            no-repeat center;
                    }
                }
            }
        }
        .holder {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 11px 10px;
            line-height: 22px;
            &.holder-item {
                & > span {
                    color: #f4f636;
                }
            }
            &.holder-item,
            &.holder-head {
                font-size: 15px;
                color: #ff8900;
                & > span {
                    text-align: left;
                    font-size: 16px;

                    .org-label {
                        color: #fff;
                        display: inline-block;
                        padding: 3px 4px;
                        border-radius: 2px;
                        font-size: 13px;
                        line-height: 13px;
                        &.org-1 {
                            background: #052b6a;
                        }
                        &.org-2 {
                            background: #6a0508;
                        }
                        &.org-3 {
                            background: #6a3e05;
                        }
                    }

                    &.color-0 {
                        color: #f4f636;
                    }
                    &.color-1,
                    &.color-6 {
                        color: #bd0ef5;
                    }
                    &.color-2,
                    &.color-7 {
                        color: #ffa48c;
                    }
                    &.color-3,
                    &.color-8 {
                        color: #8cb4f7;
                    }
                    &.color-4,
                    &.color-9 {
                        color: #f54932;
                    }
                    &.color-5,
                    &.color-10 {
                        color: #e0e0e0;
                    }
                    &.turquoise {
                        color: #02e2f4;
                    }

                    &:nth-child(1) {
                        flex-basis: 40px;
                        color: #bcbfc4;
                        &.head-1 {
                            color: #ff8900;
                        }
                    }
                    &:nth-child(2) {
                        flex-basis: 40px;
                    }
                    &:nth-child(3) {
                        flex-basis: 150px;
                        flex-grow: 1;
                    }
                    &:nth-child(4) {
                        flex-basis: 80px;
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>
